<template>
    <div>
        <div class="header">
            <div class="label ">
                <img src="@/assets/logo.svg" class="logo" alt="logo" @click="jumpToHome">
                <span class="title">HRS 酒店管理系统</span>
            </div>
            <a-menu   v-model="current" mode="horizontal" theme="light">
                <a-menu-item  key="1"  v-if="userInfo.userType!='Admin'">
                    <router-link  to="/hotel/homepage">
                        <a-icon type="home" />首页
                    </router-link>
                </a-menu-item>
                <!--            <a-menu-item  key="1" @click="selectMenu" v-if="userInfo.userType!='Admin'">-->
                <!--                <router-link to="/hotel/hotelList">-->
                <!--                    <a-icon type="home" />首页-->
                <!--                </router-link>-->
                <!--            </a-menu-item>-->
                <a-menu-item key="5"  @click="selectMenu" v-if="userInfo.userType=='Client'">
                    <!--                key是5！！ 点击事件要改一下记得！！-->
                    <router-link :to="{name:'hotelBooking'}" class="booking">
                        <!--                    不知道为啥，只有这种写法才能（保留header！）通过child加载-->
                        <a-icon type="environment" />酒店预定
                    </router-link>
                </a-menu-item>
                <a-menu-item  key="2" @click="jumpToUserInfo" v-if="userInfo.userType=='Client'">
                    <a-icon type="user" />个人中心
                </a-menu-item>
                <a-menu-item  key="3" @click="selectMenu" v-if="userInfo.userType=='HotelManager'">
                    <router-link :to="{ name: 'manageHotel'}">
                        <a-icon type="switcher" />酒店管理
                    </router-link>
                </a-menu-item>
                <a-menu-item  key="4" @click="selectMenu" v-if="userInfo.userType=='Admin'">
                    <router-link :to="{ name: 'manageUser'}">
                        <a-icon type="user" />账户管理
                    </router-link>
                </a-menu-item>
            </a-menu>
            <div class="logout">
                <a-dropdown placement="bottomCenter">
                    <div class="user">
                        <!--                    <a-avatar src="./defaultAvatar.png"></a-avatar>-->
                        <img class="userimg" :src=" userpic.pic?'data:image/png;base64,'+userpic.pic:'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png'">
                        <span style="font-size: 14px">{{ userInfo.userName }}</span>
                        <a-icon style="margin-left: 3px; font-size: 16px" type="down"></a-icon>
                    </div>
                    <a-menu slot="overlay">
                        <a-menu-item @click="jumpToUserInfo()" v-if="userInfo.userType!='Client'">
                            <a-icon type="profile"></a-icon>
                            我的信息
                        </a-menu-item>
                        <a-menu-item @click="quit()">
                            <a-icon type="poweroff"></a-icon>
                            退出登录
                        </a-menu-item>
                    </a-menu>
                </a-dropdown>
            </div>
        </div>
        <div class="sp_line">

        </div>
    </div>

</template>
<script>
    import { mapGetters, mapActions, mapMutations } from 'vuex'
    export default {
        name: '',
        data() {
            return {
                current: ['1']
            }
        },
        mounted() {
            this.getuserpic(this.userId)
        },

        computed: {
            ...mapGetters([
                'userId',
                'userInfo',
                'userpic'
            ])
        },


        watch: {
            //监听路由，只要路由有变化(路径，参数等变化)都有执行下面的函数，你可以
            $route: {
                handler: function (val, oldVal) {
                    // let _urlParams = this.$route.params;
                    // //created事件触发的函数可以在这里写...
                    // //都是componentA组件，声明周期还在，改变不了
                    // console.log("上面")
                    // console.log('改变了')
                    // console.log(this.$route.name);
                    if (this.$route.name == 'homepage' || this.$route.name == 'hotelDetail') {
                        this.current = ['1']
                    } else if (this.$route.name == 'userInfo') {
                        this.current = ['2']
                    } else if (this.$route.name == 'manageHotel') {
                        this.current = ['3']
                    } else if (this.$route.name == 'hotelBooking') {
                        this.current = ['5']
                    }
                },
                deep: true
            }
        },
        methods: {

            ...mapMutations([

            ]),
            change(data) {
                console.log('拿到了')
                console.log(data)
            },
            ...mapActions([
                'logout',
                'getuserpic'
            ]),
            selectMenu(v){
            },
            async quit() {
                await this.$store.dispatch('logout')
                this.$router.push(`/login?redirect=${this.$route.fullPath}`)
            },
            jumpToUserInfo() {
                this.$router.push({ name: 'userInfo', params: { userId: this.userId } })
            },
            jumpToHome() {},
        }
    }
</script>
<style scoped lang="less">
    .userimg{
        border-radius: 50%;
        height: 35px;
        width: 35px;
        margin-top: 13px;
        margin-bottom: 10px;
    }
    .sp_line{
        padding: 0 0px 0;
        margin: 0px 0;
        background-color: rgb(226, 226, 226);
        height: 1px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
        border-left: 0px solid #ddd;
        border-right: 0px solid #ddd;
        text-align: center;
    }
    .header {
        display: flex;
        background: #ffffff;
        /*line-height: 44px;*/
        height: 80px;
        align-items: center;
        justify-content: space-between;
        min-width: 800px;
        padding-left: 150px;
        padding-right: 150px;

        .label{
            height: 44px;
            line-height: 44px;
            vertical-align: middle;
            min-width: 400px;

            .logo {
                height: 44px;
                vertical-align: top;
                margin-right: 16px;
                border-style: none;
                cursor: pointer;
            }

            .title {
                font-size: 33px;
                color: rgba(0, 0, 0, .85);
                font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
                font-weight: 600;
                position: relative;
                top: 2px;
            }

            .search {
                width: 300px;
                margin-left: 30px
            }
        }
        .logout {
            margin-right: 40px;
            .user {
                cursor: pointer;
                display:flex;
                align-items: center;
                span {
                    margin-left: 5px
                }
            }
        }

    }
</style>
<style lang="less">
    .header {
        .ant-menu {
            background: none
        }
    }
</style>
